@use "sass:color";
@import "../../../../style/pc/default/theme";
.lexmis-Button{
	$outline-bg-color:rgba(250,250,250,.5);
	position:relative;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	height:$-form-widget-height;
	padding:0 16px;
	border-radius:$-but-border-radius;
	font-size:$-content-font-size;
	cursor:pointer;
	user-select:none;
	transition:$-form-widget-transition;
	transition-property:background-color,border-color,color;
	vertical-align:middle;
	&:focus{
		outline:0;
	}
	&.lexmis--forbid{
		@include disable-mask;
		&:after{
			border-radius:$-but-border-radius;
		}
		&.lexmis--outline:after,&.lexmis--default:after{
			width:calc(100% + 2px);
			height:calc(100% + 2px);
			left:-1px;
			top:-1px;
		}
		&.lexmis--rounded:after{
			border-radius:$-form-widget-height / 2;
		}
		&.lexmis--round:after{
			border-radius:50%;
		}
	}
	&.lexmis--rounded{
		border-radius:$-form-widget-height / 2;
	}
	&.lexmis--round{
		border-radius:50%;
		width:34px;
		height:34px;
		padding:0;
		>.q-icon{
			margin-right:0;
		}
	}
	&.lexmis--default{
		&.lexmis--fill{
			border:1px solid $-border-color;
			color:$-title-color;
			background:#fff;
			&.lexmis--hoverable{
				&:hover,&:focus{
					color:$-primary-color;
					border-color:$-primary-color;
					background-color:#fff;
				}
				&:active{
					color: color.scale($-primary-color,$lightness:-10%);
					border-color: color.scale($-primary-color,$lightness:-10%);
				}
			}
		}
		&.lexmis--outline{
			border:1px solid #fff;
			color:#fff;
			&.lexmis--hoverable{
				&:hover,&:focus{
					color:$-primary-color;
					border-color:$-primary-color;
				}
				&:active{
					color: color.scale($-primary-color,$lightness:-10%);
					border-color: color.scale($-primary-color,$lightness:-10%);
				}
			}
		}
	}
	&.lexmis--primary{
		color:#fff;
		&.lexmis--fill{
			background:$-primary-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background: color.scale($-primary-color,$lightness:15%);
				}
				&:active{
					background: color.scale($-primary-color,$lightness:-10%);
				}
			}
		}
		&.lexmis--outline{
			border:1px solid $-primary-color;
			color:$-primary-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background:$outline-bg-color;
				}
				&:active{
					background: color.scale($outline-bg-color,$lightness:-5%);
				}
			}
		}
	}
	&.lexmis--info{
		color:#fff;
		&.lexmis--fill{
			background:$-info-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background: color.scale($-info-color,$lightness:18%);
				}
				&:active{
					background: color.scale($-info-color,$lightness:-12%);
				}
			}
		}
		&.lexmis--outline{
			border:1px solid $-info-color;
			color:$-info-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background:$outline-bg-color;
				}
				&:active{
					background: color.scale($outline-bg-color,$lightness:-5%);
				}
			}
		}
	}
	&.lexmis--success{
		color:#fff;
		&.lexmis--fill{
			background:$-success-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background: color.scale($-success-color,$lightness:6%);
				}
				&:active{
					background: color.scale($-success-color,$lightness:-5%);
				}
			}
		}
		&.lexmis--outline{
			border:1px solid $-success-color;
			color:$-success-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background:$outline-bg-color;
				}
				&:active{
					background: color.scale($outline-bg-color,$lightness:-5%);
				}
			}
		}
	}
	&.lexmis--warning{
		color:#fff;
		&.lexmis--fill{
			background:$-warning-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background: color.scale($-warning-color,$lightness:18%);
				}
				&:active{
					background: color.scale($-warning-color,$lightness:-5%);
				}
			}
		}
		&.lexmis--outline{
			border:1px solid $-warning-color;
			color:$-warning-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background:$outline-bg-color;
				}
				&:active{
					background: color.scale($outline-bg-color,$lightness:-5%);
				}
			}
		}
	}
	&.lexmis--error{
		color:#fff;
		&.lexmis--fill{
			background:$-error-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background: color.scale($-error-color,$lightness:15%);
				}
				&:active{
					background: color.scale($-error-color,$lightness:-5%);
				}
			}
		}
		&.lexmis--outline{
			border:1px solid $-error-color;
			color:$-error-color;
			&.lexmis--hoverable{
				&:hover,&:focus{
					background:$outline-bg-color;
				}
				&:active{
					background: color.scale($outline-bg-color,$lightness:-5%);
				}
			}
		}
	}
	>.lexmis_spinner{
		margin-left:$-mini-gap;
	}
	>.q-icon{
		flex-shrink:0;
		font-size:20px;
		margin-right:5px;
	}
	>.lexmis_content{
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		text-align:center;
	}
}
